<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				/*
				盒子可见框的大小，由内容区，内边距共同决定。
					width和height只是内容区大小					
				*/
				width: 100px;
				height: 100px;
				background-color: green;
				
				/*
				元素的边框需要三个样式
					宽度、颜色和样式
				border-width 分别制定四个边框的宽度
				*/
			   /* border-width: 10px 1px 30px 100px; */
			   /*
			   如果是三个值，就是 上 左右 下
			   两个和一个，是一样的
			   
			   如果不写的话，每个浏览器都有不同的默认值
			   */
			   border-width: 10px 1px 100px;
			   border-color: red;
			   border-style: solid;
			   
			   /*
			   border 的简写
			   不能分别指定各个边的样式
			   */
			   border: 10px red solid;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
	</body>
</html>
